<template>
	<div class="login-wrap">
		<div class="login-box">
			<img src="../../../static/img/login.png" class="login_img">

			<div class="ms-login">
				<div class="ms-title">高校体育后台管理</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item v-if="isDev" prop="loginType">
						<el-select v-model="loginType">
							<el-option label="个人服务器(开发)" value='/api_pre'></el-option>
							<el-option label="185服务器" value='/api_185'></el-option>
							<el-option label="126服务器" value='/api_126'></el-option>
							<el-option label="187服务器" value='/api_187'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入账号" size="48px"  id="account"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
					</el-form-item>
					<div class="login-btn">
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapActions } from "vuex";
	import Vue from 'vue';
	import store from '../../../vuex/index';

	export default {
		data() {
			let checkUsername = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入用户名"));
				} else {
					callback();
				}
			};
			let validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (value.length < 3 || value.length > 20) {
						callback(new Error("密码格式错误"));
					} else {
						callback();
					}
				}
			};
			return {
				ruleForm: {
					username: "",
					password: ""
				},
				rules: {
					username: [
						{ required: true, message: "请输入用户名", trigger: "blur" },
						{ validator: checkUsername }
					],
					password: [
						{ required: true, message: "请输入密码", trigger: "blur" },
						{ validator: validatePass }
					]
				},
				loginType: localStorage.getItem("domain") || this.$util.domain,
				isDev: this.$util.domain.indexOf('/api_') > -1 ? true : false
			};
		},
		methods: {
			...mapActions(["SIGNIN"]),

			submitForm(formName) {
				if (this.isDev) {
					localStorage.setItem("domain", this.loginType);
					this.$util.domain = localStorage.getItem("domain");
				}

				this.$refs[formName].validate(valid => {
					if (valid) {
						let userSign = "Basic " + this.$util.toBase64(this.ruleForm.username + ":" + this.ruleForm.password);

						this.$http({
							method: "POST",
							url: this.$util.domain + "/campusadminapi/v1/login/submit",
							headers: {
								Authorization: userSign
							},
							body: JSON.stringify({
								username: this.ruleForm.username
							})
						}).then(response => {
							if (response.data.error == 10000) {
								let userInfo = {
									mid: response.data.data.manager.mid,
									uid: response.data.data.manager.uid,
									schools: response.data.data.schools,
									type: response.data.data.manager.type,
									name: response.data.data.manager.nick,
									uniName: response.data.data.manager.defaultUniName,
									rootUnid: response.data.data.manager.defaultRootUnid
								};
								this.SIGNIN(userInfo);
								Vue.http.options.headers = {
									rootUnid: store.state.user.rootUnid + ""
								};
								if (userInfo.type == 3) {
									location.href = "/#/studentManage";
								} else if (userInfo.type == 4) {
									location.href = "/#/venueManage";
								} else {
									location.href = "/#/teacherManage";
								}
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}).catch(response => {
							if(response.status == 502){
								location.href="/#/502";
							}
						});
					}

				});
			}
		}
	};  
</script>

<style>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background: url("../../../static/img/login_bg.png");
		background-size: 100% 100%;
	}

	.login-box {
		width: 100%;
		height: 500px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
	}

	img.login_img {
		height: 500px;
		vertical-align: middle;
	}

	.login-wrap .ms-title {
		width: 360px;
		text-align: center;
		font-size: 24px;
		color: #fff;
		margin-bottom: 30px;
	}

	.login-wrap .ms-login {
		width: 360px;
		border-radius: 5px;
		display: inline-block;
		margin-left: 200px;
		position: relative;
		top: 80px;
	}

	.login-btn {
		text-align: center;
	}

	.login-wrap .el-input,
	.login-wrap .el-select {
		width: 100%;
	}

	.login-wrap .ms-login .el-input__inner {
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		border-radius: 8px !important;
	}

	.login-btn button,
	.login-btn button:hover {
		width: 100%;
		height: 48px;
		background: #2ad5ff;
		border-color: #2ad5ff;
		font-size: 24px;
		border-radius: 8px !important;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.11);
	}

	@media screen and (max-width: 1200px) {
		img.login_img {
			width: 500px;
			height: auto;
			position: absolute;
			top: 0px;
			left: 5%;
		}

		.login-wrap .ms-login {
			margin-left: 500px;
		}
	}
</style>